<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Clever-UI</title>
    <meta name="keyword" content="ui框架,cui,clever-ui,ui架构">
    <meta name="description" content="容易上手,简洁轻量">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="author" content="clever stone">
    <link rel="stylesheet" href="../dist/css/index.css?_=0123456789">
    <style>
        .cui-menu-example {
            width: 240px;
            height: 600px;
            overflow: hidden;
            background-color: #3b4547;
            color: #f2f2f2;
            border-radius: 2px;
            position: relative;
        }
        .cui-menu-scroll-example {
            width: 257px;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .cui-scroll-thumb-example {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: #555555;
        }
        .cui-scroll-bar-example {
            width: 5px;
            height: 80px;
            background-color: #999999;
        }
    </style>
</head>
<body>
<div class="cui-main">
    <div class="cui-container-fluid" id="cuiexampletop">
        <!--card-->
        <div id="cuicardanchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                卡片
            </div>
            <div class="cui-card-body cui-p-12 cui-row">
                <div class="cui-card cui-bg-white cui-col-3 cui-ml-12">
                    <div class="cui-card-header cui-f-14">
                        佳人
                    </div>
                    <div class="cui-card-body cui-p-12">
                        <p>绝代有佳人，幽居在空谷。自云良家女，零落依草木。</p>
                        <p>关中昔丧乱，兄弟遭杀戮。官高何足论，不得收骨肉。</p>
                        <p>世情恶衰歇，万事随转烛。夫婿轻薄儿，新人美如玉。</p>
                        <p>合昏尚知时，鸳鸯不独宿。但见新人笑，那闻旧人哭。</p>
                        <p>在山泉水清，出山泉水浊。侍婢卖珠回，牵萝补茅屋。</p>
                        <p>摘花不插发，采柏动盈掬。</p>
                    </div>
                </div>
                <div class="cui-card cui-bg-light cui-col-3 cui-ml-12">
                    <div class="cui-card-header cui-f-14">
                        佳人
                    </div>
                    <div class="cui-card-body cui-p-12">
                        <p>绝代有佳人，幽居在空谷。自云良家女，零落依草木。</p>
                        <p>关中昔丧乱，兄弟遭杀戮。官高何足论，不得收骨肉。</p>
                        <p>世情恶衰歇，万事随转烛。夫婿轻薄儿，新人美如玉。</p>
                        <p>合昏尚知时，鸳鸯不独宿。但见新人笑，那闻旧人哭。</p>
                        <p>在山泉水清，出山泉水浊。侍婢卖珠回，牵萝补茅屋。</p>
                        <p>摘花不插发，采柏动盈掬。</p>
                    </div>
                </div>
                <div class="cui-card cui-bg-deep cui-col-3 cui-ml-12">
                    <div class="cui-card-header cui-f-14">
                        佳人
                    </div>
                    <div class="cui-card-body cui-p-12">
                        <p>绝代有佳人，幽居在空谷。自云良家女，零落依草木。</p>
                        <p>关中昔丧乱，兄弟遭杀戮。官高何足论，不得收骨肉。</p>
                        <p>世情恶衰歇，万事随转烛。夫婿轻薄儿，新人美如玉。</p>
                        <p>合昏尚知时，鸳鸯不独宿。但见新人笑，那闻旧人哭。</p>
                        <p>在山泉水清，出山泉水浊。侍婢卖珠回，牵萝补茅屋。</p>
                        <p>摘花不插发，采柏动盈掬。</p>
                    </div>
                </div>
                <div class="cui-card cui-bg-dark cui-col-3 cui-ml-12">
                    <div class="cui-card-header cui-f-14">
                        佳人
                    </div>
                    <div class="cui-card-body cui-p-12">
                        <p>绝代有佳人，幽居在空谷。自云良家女，零落依草木。</p>
                        <p>关中昔丧乱，兄弟遭杀戮。官高何足论，不得收骨肉。</p>
                        <p>世情恶衰歇，万事随转烛。夫婿轻薄儿，新人美如玉。</p>
                        <p>合昏尚知时，鸳鸯不独宿。但见新人笑，那闻旧人哭。</p>
                        <p>在山泉水清，出山泉水浊。侍婢卖珠回，牵萝补茅屋。</p>
                        <p>摘花不插发，采柏动盈掬。</p>
                    </div>
                </div>
            </div>
        </div>
        <!--button button-group-->
        <div id="cuibtnanchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                按钮和按钮组
            </div>
            <div class="cui-card-body cui-p-12">
                <!--button-->
                <button type="button" class="cui-btn cui-btn-sm cui-btn-primary">主题按钮</button>
                <button type="button" class="cui-btn cui-btn-sm cui-btn-white cui-ml-12">白色按钮</button>
                <button type="button" class="cui-btn cui-btn-sm cui-btn-black cui-ml-12">黑色按钮</button>
                <button type="button" class="cui-btn cui-btn-sm cui-btn-danger cui-ml-12">危险按钮</button>
                <button type="button" class="cui-btn cui-btn-sm cui-btn-default cui-ml-12">默认按钮</button>
                <button type="button" class="cui-btn cui-btn-sm cui-btn-warning cui-ml-12">警告按钮</button>
                <!--button-group-->
                <div class="cui-btn-group cui-mt-12">
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-primary">主题按钮</button>
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-white">白色按钮</button>
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-black">黑色按钮</button>
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-danger">危险按钮</button>
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-default">默认按钮</button>
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-warning">警告按钮</button>
                </div>
                <!--button icon-->
                <div class="cui-btn-group cui-mt-12">
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-primary"><i class="cui-icon icon-location"></i></button>
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-white"><i class="cui-icon icon-back"></i></button>
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-primary"><i class="cui-icon icon-baocun"></i></button>
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-white"><i class="cui-icon icon-exit-door"></i></button>
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-primary"><i class="cui-icon icon-m-update"></i></button>
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-white"><i class="cui-icon icon-add"></i></button>
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-primary"><i class="cui-icon icon-shanchu"></i></button>
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-white"><i class="cui-icon icon-morentupian"></i></button>
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-primary"><i class="cui-icon icon-login"></i></button>
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-white"><i class="cui-icon icon-close"></i></button>
                    <button type="button" class="cui-btn cui-btn-sm cui-btn-primary"><i class="cui-icon icon-sousuo"></i></button>
                </div>
            </div>
        </div>
        <!--form-->
        <div id="cuiformanchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                表单
            </div>
            <div class="cui-card-body">
                <form class="cui-form cui-col-8">
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-sm cui-w-80" for="name">姓名:</label>
                        <input id="name" type="text" class="cui-form-control cui-input-sm" placeholder="请填写姓名"
                               value="cleverstone">
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-sm cui-w-80" for="age">年龄:</label>
                        <input id="age" type="text" class="cui-form-control cui-input-sm" placeholder="请填写年龄"
                               value="27">
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-sm cui-w-80" for="card">身份证:</label>
                        <input id="card" type="text" class="cui-form-control cui-input-sm" placeholder="请填写身份证"
                               value="保密~">
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-sm cui-w-80" for="school">学校:</label>
                        <input id="school" type="text" class="cui-form-control cui-input-sm" placeholder="请填写学校"
                               value="延津一中">
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-sm cui-w-80" for="line">行业:</label>
                        <select name="line" id="line" class="cui-form-control cui-input-sm">
                            <option value="">请选择行业</option>
                            <option value="1" selected>互联网通信</option>
                            <option value="2">销售</option>
                        </select>
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-sm cui-w-80" for="mark">备注:</label>
                        <textarea name="mark" id="mark" cols="30" rows="3" class="cui-form-control cui-input-sm"
                                  placeholder="请填写备注"></textarea>
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-sm cui-w-80" for="range">开关:</label>
                        <input type="range" id="range" class="cui-form-control cui-input-sm" min="0" max="100" step="5"
                               value="0">
                    </div>
                    <div class="cui-form-group cui-justify-content-center">
                        <button type="reset" class="cui-btn cui-btn-sm cui-btn-white cui-mr-6">重置</button>
                        <button type="submit" class="cui-btn cui-btn-sm cui-btn-primary">提交</button>
                    </div>
                </form>
            </div>
        </div>
        <!--form-inline-->
        <div id="cuiforminlineanchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                行内表单
            </div>
            <div class="cui-card-body">
                <form class="cui-form-inline cui-radius">
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-md" for="name2">姓名:</label>
                        <input id="name2" type="text" class="cui-form-control cui-solid-bottom cui-w-120 cui-input-md"
                               placeholder="请填写姓名">
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-md" for="age2">年龄:</label>
                        <input id="age2" type="text" class="cui-form-control cui-solid-bottom cui-w-120 cui-input-md"
                               placeholder="请填写年龄">
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-md" for="card2">身份证:</label>
                        <input id="card2" type="text" class="cui-form-control cui-solid-bottom cui-w-120 cui-input-md"
                               placeholder="请填写身份证">
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-md" for="school2">学校:</label>
                        <input id="school2" type="text" class="cui-form-control cui-solid-bottom cui-w-120 cui-input-md"
                               placeholder="请填写学校">
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-md" for="hours">课时:</label>
                        <input id="hours" type="number" class="cui-form-control cui-solid-bottom cui-w-120 cui-input-md"
                               placeholder="请填写课时">
                    </div>
                </form>
            </div>
        </div>
        <!--title-p-->
        <div id="cuilayoutanchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                标题和段落
            </div>
            <div class="cui-card-body cui-p-12">
                <!--title - p-->
                <h1 class="cui-text-primary">标题1</h1>
                <h2 class="cui-text-c0">标题1</h2>
                <h3 class="cui-text-c3">标题1</h3>
                <h4 class="cui-text-c6">标题1</h4>
                <h5 class="cui-text-c9">标题1</h5>
                <h6 class="cui-text-white">标题1</h6>
                <p>段落</p>
            </div>
        </div>
        <!--table-->
        <div id="cuitableanchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                表格
            </div>
            <div class="cui-card-body">
                <!--table-->
                <div class="cui-card-body cui-p-12">
                    <table class="cui-table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>身份证</th>
                            <th>学校</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>cleverstone</td>
                            <td>27</td>
                            <td>4107251993014542145</td>
                            <td>延津一中</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>cleverstone</td>
                            <td>27</td>
                            <td>4107251993014542145</td>
                            <td>延津一中</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <!--table-border-both-->
                <div class="cui-card-body cui-p-12">
                    <table class="cui-table cui-table-border-both">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>身份证</th>
                            <th>学校</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>cleverstone</td>
                            <td>27</td>
                            <td>4107251993014542145</td>
                            <td>延津一中</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>cleverstone</td>
                            <td>27</td>
                            <td>4107251993014542145</td>
                            <td>延津一中</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <!--table-border-->
                <div class="cui-card-body cui-p-12">
                    <table class="cui-table cui-table-border">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>身份证</th>
                            <th>学校</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>cleverstone</td>
                            <td>27</td>
                            <td>4107251993014542145</td>
                            <td>延津一中</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>cleverstone</td>
                            <td>27</td>
                            <td>4107251993014542145</td>
                            <td>延津一中</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <!--table-hover-->
                <div class="cui-card-body cui-p-12">
                    <table class="cui-table cui-table-border cui-table-hover">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>身份证</th>
                            <th>学校</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>cleverstone</td>
                            <td>27</td>
                            <td>4107251993014542145</td>
                            <td>延津一中</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>cleverstone</td>
                            <td>27</td>
                            <td>4107251993014542145</td>
                            <td>延津一中</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!--sign-badge-->
        <div id="cuisignbadgeanchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                标签和徽章
            </div>
            <div class="cui-card-body cui-p-12">
                <span class="cui-badge cui-badge-success">支付宝</span>
                <span class="cui-badge cui-badge-warning">网银快捷</span>
                <span class="cui-badge cui-badge-danger">四方支付</span>
                <span class="cui-badge cui-badge-primary">主题颜色</span>
                <span class="cui-badge cui-badge-deep">暗褐色</span>
            </div>
            <div class="cui-card-body cui-p-12">
                <p class="cui-f-14 cui-my-6">支付宝<span class="cui-tag cui-tag-success">热</span></p>
                <p class="cui-f-14 cui-my-6">网银快捷<span class="cui-tag cui-tag-warning">热</span></p>
                <p class="cui-f-14 cui-my-6">四方支付<span class="cui-tag cui-tag-danger">热</span></p>
                <p class="cui-f-14 cui-my-6">主题颜色<span class="cui-tag cui-tag-primary">热</span></p>
                <p class="cui-f-14 cui-my-6">暗褐色<span class="cui-tag cui-tag-deep">热</span></p>
            </div>
        </div>
        <!--list-group-->
        <div id="cuilistgroupanchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                列表组
            </div>
            <div class="cui-card-body cui-p-12">
                <ul class="cui-list-group cui-col-6">
                    <li class="cui-list-group-item cui-bg-light">我是列表1</li>
                    <li class="cui-list-group-item">我是列表2</li>
                    <li class="cui-list-group-item cui-bg-primary cui-text-white cui-border-primary">我是列表3</li>
                    <li class="cui-list-group-item">我是列表4</li>
                    <li class="cui-list-group-item cui-bg-deep">我是列表5</li>
                </ul>
            </div>
            <div class="cui-card-body cui-p-12">
                <ul class="cui-list-group-inline cui-col-6">
                    <li class="cui-list-group-item cui-bg-light">我是列表1</li>
                    <li class="cui-list-group-item">我是列表2</li>
                    <li class="cui-list-group-item cui-bg-primary cui-text-white cui-border-primary">我是列表3</li>
                    <li class="cui-list-group-item">我是列表4</li>
                    <li class="cui-list-group-item cui-bg-deep">我是列表5</li>
                </ul>
            </div>
        </div>
        <!--pagination-->
        <div id="cuipageanchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                分页
            </div>
            <div class="cui-card-body cui-p-12">
                <div class="cui-paging">
                    <span class="cui-paging-item cui-disabled">上一页</span>
                    <span class="cui-paging-item cui-active">1</span>
                    <a class="cui-paging-item">2</a>
                    <a class="cui-paging-item">3</a>
                    <a class="cui-paging-item">4</a>
                    <a class="cui-paging-item">5</a>
                    <a class="cui-paging-item">下一页</a>
                </div>
            </div>
        </div>
        <!--modal-->
        <div id="cuimodalanchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                模态框
            </div>
            <div class="cui-card-body cui-p-12">
                <!--<input type="button" value="模态框" class="cui-btn cui-btn-white" data-cui-toggle="cuimodal" data-cui-target="#testModal">-->
                <input type="button" value="小模态框" class="cui-btn cui-btn-sm cui-btn-white" id="testModalBtn">
                <button type="button" class="cui-btn cui-btn-primary" data-cui-toggle="cuimodal" data-cui-target="#test3Modal">中模态框</button>
                <button type="button" class="cui-btn cui-btn-lg cui-btn-primary" data-cui-toggle="cuimodal" data-cui-target="#test4Modal">大模态框</button>
            </div>
            <!--<div class="cui-modal cui-fade" id="testModal" data-cui-shade="false">-->
            <div class="cui-modal cui-fade" id="testModal">
                <div class="cui-modal-dialog cui-modal-sm">
                    <div class="cui-content">
                        <div class="cui-modal-header">
                            <h6 class="cui-inline-block">小模态框</h6>
                            <span class="cui-close" data-cui-close="cuimodal">&times;</span>
                        </div>
                        <div class="cui-modal-body">
                            <form class="cui-form cui-col-12">
                                <div class="cui-dropdown">
                                    <button type="button" data-cui-toggle="cuidropdown" class="cui-dropdown-btn cui-btn cui-btn-white">下拉菜单2</button>
                                    <ul class="cui-dropdown-content">
                                        <li class="cui-dropdown-item" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=001">Vue交互框架2</li>
                                        <li class="cui-dropdown-item" data-cui-toggle="cuimodal" data-cui-target="#testModal">Angular交互框架2</li>
                                        <li class="cui-dropdown-item">React交互框架2</li>
                                        <li class="cui-dropdown-item">Layui UI框架2</li>
                                        <li class="cui-dropdown-item">Mui 5+runtime UI框架2</li>
                                        <li class="cui-dropdown-item">Clever-UI UI框架2</li>
                                    </ul>
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-sm cui-w-80" for="nameExample">姓名:</label>
                                    <input id="nameExample" type="text" class="cui-form-control cui-input-sm"
                                           placeholder="请填写姓名" value="cleverstone">
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-sm cui-w-80" for="ageExample">年龄:</label>
                                    <input id="ageExample" type="text" class="cui-form-control cui-input-sm"
                                           placeholder="请填写年龄" value="27">
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-sm cui-w-80" for="cardExample">身份证:</label>
                                    <input id="cardExample" type="text" class="cui-form-control cui-input-sm"
                                           placeholder="请填写身份证" value="保密~">
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-sm cui-w-80" for="schoolExample">学校:</label>
                                    <input id="schoolExample" type="text" class="cui-form-control cui-input-sm"
                                           placeholder="请填写学校" value="延津一中">
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-sm cui-w-80" for="lineExample">行业:</label>
                                    <select name="lineExample" id="lineExample" class="cui-form-control cui-input-sm">
                                        <option value="">请选择行业</option>
                                        <option value="1" selected>互联网通信</option>
                                        <option value="2">销售</option>
                                    </select>
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-sm cui-w-80" for="markExample">备注:</label>
                                    <textarea name="markExample" id="markExample" cols="30" rows="3"
                                              class="cui-form-control cui-input-sm" placeholder="请填写备注"></textarea>
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-sm cui-w-80" for="rangeExample">开关:</label>
                                    <input type="range" id="rangeExample" class="cui-form-control cui-input-sm" min="0"
                                           max="100" step="5" value="0">
                                </div>
                            </form>
                        </div>
                        <div class="cui-modal-footer">
                            <button type="button" class="cui-btn cui-btn-sm cui-btn-white" data-cui-close="cuimodal">关闭
                            </button>
                            <input type="button" value="层级模态框" class="cui-btn cui-btn-sm cui-btn-white" data-cui-toggle="cuimodal" data-cui-target="#test2Modal">
                            <button type="button" class="cui-btn cui-btn-sm cui-btn-primary"
                                    onclick="var loadingModal = $cui.loadingShow(); setTimeout(function() {
                                      loadingModal.cuiLoadingHide();
                                      $('#testModal').cuiModal('hide');
                                      $cui.toastr.tip('我是小模态框');
                                    }, 1000)">
                                确定
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cui-modal cui-fade" id="test2Modal">
                <div class="cui-modal-dialog cui-modal-sm">
                    <div class="cui-content">
                        <div class="cui-modal-header">
                            <h6 class="cui-inline-block">层级模态框</h6>
                            <span class="cui-close" data-cui-close="cuimodal">&times;</span>
                        </div>
                        <div class="cui-modal-body">
                            <p class="cui-f-13">我是层级模态框</p>
                        </div>
                        <div class="cui-modal-footer">
                            <button type="button" class="cui-btn cui-btn-sm cui-btn-white" data-cui-close="cuimodal">关闭
                            </button>
                            <button type="button" class="cui-btn cui-btn-sm cui-btn-primary" data-cui-btnloadingtext onclick="
                            var test2ModalBtn = $(this);
                            test2ModalBtn.cuiBtnLoading();
                            setTimeout(function() {
                                $('#test2Modal').cuiModal('hide', function() {
                                      console.log('test2Modal hidden');
                                      test2ModalBtn.cuiBtnLoadingReset();
                                });
                            }, 1000)">确定</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cui-modal cui-fade" id="test3Modal">
                <div class="cui-modal-dialog cui-modal-md">
                    <div class="cui-content">
                        <div class="cui-modal-header">
                            <h5 class="cui-inline-block">中等模态框</h5>
                            <span class="cui-close" data-cui-close="cuimodal">&times;</span>
                        </div>
                        <div class="cui-modal-body">
                            <form class="cui-form cui-col-12">
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-md cui-w-80" for="nameExample1">姓名:</label>
                                    <input id="nameExample1" type="text" class="cui-form-control cui-input-md"
                                           placeholder="请填写姓名" value="cleverstone">
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-md cui-w-80" for="ageExample1">年龄:</label>
                                    <input id="ageExample1" type="text" class="cui-form-control cui-input-md"
                                           placeholder="请填写年龄" value="27">
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-md cui-w-80" for="cardExample1">身份证:</label>
                                    <input id="cardExample1" type="text" class="cui-form-control cui-input-md"
                                           placeholder="请填写身份证" value="保密~">
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-md cui-w-80" for="schoolExample1">学校:</label>
                                    <input id="schoolExample1" type="text" class="cui-form-control cui-input-md"
                                           placeholder="请填写学校" value="延津一中">
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-md cui-w-80" for="lineExample1">行业:</label>
                                    <select name="lineExample1" id="lineExample1" class="cui-form-control cui-input-md">
                                        <option value="">请选择行业</option>
                                        <option value="1" selected>互联网通信</option>
                                        <option value="2">销售</option>
                                    </select>
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-md cui-w-80" for="markExample1">备注:</label>
                                    <textarea name="markExample1" id="markExample1" cols="30" rows="3"
                                              class="cui-form-control cui-input-md" placeholder="请填写备注"></textarea>
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-md cui-w-80" for="rangeExample1">开关:</label>
                                    <input type="range" id="rangeExample1" class="cui-form-control cui-input-md" min="0"
                                           max="100" step="5" value="0">
                                </div>
                            </form>
                        </div>
                        <div class="cui-modal-footer">
                            <button type="button" class="cui-btn cui-btn-white" data-cui-close="cuimodal">关闭</button>
                            <button type="button" class="cui-btn cui-btn-primary">确定</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cui-modal cui-fade" id="test4Modal">
                <div class="cui-modal-dialog cui-modal-lg">
                    <div class="cui-content">
                        <div class="cui-modal-header">
                            <h4 class="cui-inline-block">大模态框</h4>
                            <span class="cui-close" data-cui-close="cuimodal">&times;</span>
                        </div>
                        <div class="cui-modal-body">
                            <form class="cui-form cui-col-12">
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-lg cui-w-80" for="nameExample2">姓名:</label>
                                    <input id="nameExample2" type="text" class="cui-form-control cui-input-lg"
                                           placeholder="请填写姓名" value="cleverstone">
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-lg cui-w-80" for="ageExample2">年龄:</label>
                                    <input id="ageExample2" type="text" class="cui-form-control cui-input-lg"
                                           placeholder="请填写年龄" value="27">
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-lg cui-w-80" for="cardExample2">身份证:</label>
                                    <input id="cardExample2" type="text" class="cui-form-control cui-input-lg"
                                           placeholder="请填写身份证" value="保密~">
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-lg cui-w-80" for="schoolExample2">学校:</label>
                                    <input id="schoolExample2" type="text" class="cui-form-control cui-input-lg"
                                           placeholder="请填写学校" value="延津一中">
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-lgmd cui-w-80" for="lineExample2">行业:</label>
                                    <select name="lineExample2" id="lineExample2" class="cui-form-control cui-input-lg">
                                        <option value="">请选择行业</option>
                                        <option value="1" selected>互联网通信</option>
                                        <option value="2">销售</option>
                                    </select>
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-lg cui-w-80" for="markExample2">备注:</label>
                                    <textarea name="markExample2" id="markExample2" cols="30" rows="3"
                                              class="cui-form-control cui-input-lg" placeholder="请填写备注"></textarea>
                                </div>
                                <div class="cui-form-group">
                                    <label class="cui-label cui-label-lg cui-w-80" for="rangeExample2">开关:</label>
                                    <input type="range" id="rangeExample2" class="cui-form-control cui-input-lg" min="0"
                                           max="100" step="5" value="0">
                                </div>
                            </form>
                        </div>
                        <div class="cui-modal-footer">
                            <button type="button" class="cui-btn cui-btn-white" data-cui-close="cuimodal">关闭</button>
                            <button type="button" class="cui-btn cui-btn-primary">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--toastr-->
        <div id="cuitoastranchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                Toastr
            </div>
            <div class="cui-card-body cui-p-12">
                <div class="cui-flex cui-flex-wrap">
                    <div class="cui-toastr cui-toastr-sm cui-toastr-default cui-m-6">
                        <i data-cui-toastr="close" class="cui-toastr-close">&times;</i>
                        <h4><i class="cui-icon icon-tishi"></i></h4>
                        <p>您有一条新消息！</p>
                    </div>
                    <div class="cui-toastr cui-toastr-md cui-toastr-info cui-m-6">
                        <h4><i class="cui-icon icon-xinxi"></i></h4>
                        <p>您的话费余额不足，请及时充值。</p>
                    </div>
                    <div class="cui-toastr cui-toastr-md cui-toastr-warning cui-m-6">
                        <h4><i class="cui-icon icon-jinggao"></i></h4>
                        <p>请您及时续费，预期后账号将重置！</p>
                    </div>
                    <div class="cui-toastr cui-toastr-lg cui-toastr-danger cui-m-6">
                        <h4><i class="cui-icon icon-cuowu"></i></h4>
                        <p>系统错误，请您联系后台管理员，如有不便敬请原谅。</p>
                    </div>
                </div>
            </div>
            <div class="cui-card-body cui-p-12">
                <button type="button" class="cui-btn cui-btn-white"
                        onclick="$cui.toastr.tip('您有一条新消息, 您话费余额不足. 请及时充值!')">提示
                </button>
                <button type="button" class="cui-btn cui-btn-primary" onclick="$cui.toastr.info('您有一条新消息. 请您尽快查收!')">信息
                </button>
                <button type="button" class="cui-btn cui-btn-warning" onclick="$cui.toastr.warning('请正确填写用户名!')">警告
                </button>
                <button type="button" class="cui-btn cui-btn-danger" onclick="$cui.toastr.error('系统错误!请稍后重试~')">危险
                </button>
            </div>
        </div>
        <!--iconfont-->
        <div id="cuiiconanchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                cui-图标
            </div>
            <div class="cui-card-body cui-p-12 cui-flex cui-flex-wrap cui-text-c6">
                <i class="cui-icon icon-add cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-anquancopy cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-back cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-baocun cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-bianji cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-caidan cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-caozuo cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-chakangengduo cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-chart3 cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-chongzhijilu cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-close cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-cuowu cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-dailiguanli cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-daochu cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-daochu1 cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-dingdanguanli cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-discover_live cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-exit-door cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-gerenzhongxin cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-group23copy cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-guanliyuanguanli cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-houtaiguanli cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-huiyuanguanli cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-huiyuanliebiao cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-icon-contract cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-icon-test cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-icon-test1 cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-icon114 cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-icon_kefu cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-iconhuo cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-zu cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-zijinguanli cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-zhifubaozhifu cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-zhanghao cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-youxiang cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-yinhangqiazhifu cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-yinhangqia cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-yibiao cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-xinxi cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-xiaoxi cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-xiaochengxuicon- cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-weixinzhifu cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-weibiaoti- cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-wangyinzhifu cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-tubiaoguifan- cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-tishi cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-system-settings cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-sousuo cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-shuaxin cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-shouye1-copy-copy-copy cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-shezhi cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-shenhe cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-shangyiye cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-shangchuantouxiang cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-shanchu cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-rizhi cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-portal-management cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-payment cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-morentupian cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-mima cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-mass cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-m-update cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-login cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-location cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-liushui cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-jinggao cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-jiedianguanli cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-jiaoseguanli cui-f-22 cui-ml-12"></i>
                <i class="cui-icon icon-add cui-f-22 cui-ml-12"></i>
            </div>
        </div>
        <!--confirm-->
        <div id="cuiconfirmanchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                确认框
            </div>
            <div class="cui-card-body cui-p-12">
                <div class="cui-confirm">
                    <div class="cui-confirm-content">
                        确定要清空回收站么? 删除后将不能恢复. 请您谨慎操作!
                    </div>
                    <div class="cui-confirm-footer">
                        <button type="button" class="cui-btn cui-btn cui-btn-primary">确定</button>
                        <button type="button" class="cui-btn cui-btn cui-btn-white">取消</button>
                    </div>
                </div>
            </div>
            <div class="cui-card-body cui-p-12">
                <button type="button" class="cui-btn cui-btn-danger" onclick="$cui.confirm('确定要删除么?', function(close) {
              close();
              var loading = $cui.loadingShow();
              var timer = setTimeout(function() {
                   clearTimeout(timer);
                   loading.cuiLoadingHide();
                   $cui.toastr.tip('删除成功');
              }, 1000);
            })">删除数据
                </button>
                <button type="button" id="confirmExample" class="cui-btn cui-btn-warning" data-cui-btnloadingtext onclick="$cui.confirm('确定要更新数据么?', function(close, $btn) {
                    $btn.cuiBtnLoading();
                    var timer = setTimeout(function() {
                         clearTimeout(timer);
                         // $btn.cuiBtnLoadingReset();
                         close();
                         $cui.toastr.tip('更新成功');
                    }, 1000);
                })">更新数据</button>
            </div>
        </div>
        <!--loading-->
        <div id="cuiloadinganchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                Loading动画
            </div>
            <div class="cui-card-body cui-p-12 cui-flex cui-flex-wrap cui-align-items-center">
                <div class="cui-loading-scaleout"></div>
                <div class="cui-loading-water cui-ml-12">
                    <div class="cui-bounce1"></div>
                    <div class="cui-bounce2"></div>
                    <div class="cui-bounce3"></div>
                </div>
                <div class="cui-loading-inout cui-ml-12">
                    <div class="cui-double-bounce1"></div>
                    <div class="cui-double-bounce2"></div>
                </div>
                <div class="cui-loading-3d cui-ml-12"></div>
                <div class="cui-loading-downup cui-ml-12">
                    <div class="cui-rect1"></div>
                    <div class="cui-rect2"></div>
                    <div class="cui-rect3"></div>
                    <div class="cui-rect4"></div>
                    <div class="cui-rect5"></div>
                </div>

            </div>
        </div>
        <!--遮罩层-->
        <div id="cuidismissanchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                遮罩层
            </div>
            <div class="cui-card-body cui-p-12">
                <button type="button" class="cui-btn cui-btn-primary" id="showShade">展示遮罩</button>
            </div>
        </div>
        <!--button loading-->
        <div id="cuibtnloadinganchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                button loading
            </div>
            <div class="cui-card-body cui-p-12">
                <a type="button" id="btnLoadingExample" class="cui-btn cui-btn-md cui-btn-primary"
                   data-cui-btnloadingtext="处理中...">
                    确定
                </a>
                <button type="button" id="btnLoadingExample1" class="cui-btn cui-btn-lg cui-btn-default"
                        data-cui-btnloadingtext="处理中...">
                    确定
                </button>
            </div>
        </div>
        <!--开关-->
        <div id="cuiswitchanchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                开关
            </div>
            <div class="cui-card-body cui-p-12">
                <input type="checkbox" id="cuiCheckboxExample" class="cui-checkbox cui-checkbox-lg cui-ml-9" checked>
                <input type="checkbox" class="cui-checkbox cui-checkbox-md cui-ml-9">
                <input type="checkbox" class="cui-checkbox cui-checkbox-sm cui-ml-9">
                <input type="checkbox" class="cui-checkbox cui-checkbox-lg cui-checkbox-success cui-ml-9" checked>
                <input type="checkbox" class="cui-checkbox cui-checkbox-md cui-checkbox-warning cui-ml-9" checked>
                <input type="checkbox" class="cui-checkbox cui-checkbox-sm cui-checkbox-danger cui-ml-9" checked>
            </div>
            <div class="cui-card-header cui-f-16">
                开关结合表单
            </div>
            <div class="cui-card-body cui-p-12">
                <form class="cui-form cui-col-12">
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-sm cui-w-80" for="nameExample3">姓名:</label>
                        <input id="nameExample3" type="text" class="cui-form-control cui-input-sm"
                               placeholder="请填写姓名" value="cleverstone">
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-sm cui-w-80" for="ageExample3">年龄:</label>
                        <input id="ageExample3" type="text" class="cui-form-control cui-input-sm"
                               placeholder="请填写年龄" value="27">
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-sm cui-w-80" for="cardExample3">身份证:</label>
                        <input id="cardExample3" type="text" class="cui-form-control cui-input-sm"
                               placeholder="请填写身份证" value="保密~">
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-sm cui-w-80" for="schoolExample3">学校:</label>
                        <input id="schoolExample3" type="text" class="cui-form-control cui-input-sm"
                               placeholder="请填写学校" value="延津一中">
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-sm cui-w-80" for="lineExample3">行业:</label>
                        <select name="lineExample3" id="lineExample3" class="cui-form-control cui-input-sm">
                            <option value="">请选择行业</option>
                            <option value="1" selected>互联网通信</option>
                            <option value="2">销售</option>
                        </select>
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-sm cui-w-80" for="markExample3">备注:</label>
                        <textarea name="markExample3" id="markExample3" cols="30" rows="3"
                                  class="cui-form-control cui-input-sm" placeholder="请填写备注"></textarea>
                    </div>
                    <div class="cui-form-group">
                        <label class="cui-label cui-label-sm cui-w-80" for="rangeExample3">开关:</label>
                        <input type="checkbox" name="rangeExample3" id="rangeExample3" class="cui-checkbox cui-checkbox-sm" checked>
                    </div>
                </form>
            </div>
        </div>
        <!--标签页-->
        <div id="cuitabanchor" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                标签页
            </div>
            <div class="cui-card-body cui-p-12">
                <div class="cui-card-header cui-f-15">
                    横向标签
                </div>
                <!--<div class="cui-tab cui-tab-cross cui-h-300">-->
                <div class="cui-tab cui-tab-cross">
                    <ul class="cui-tab-header">
                        <li id="vueTabExample" data-cui-toggle="cuitab" data-cui-target="#vueTabContentExample" class="cui-tab-header-item">Vue</li>
                        <li data-cui-toggle="cuitab" data-cui-target="#angularTabContentExample" class="cui-tab-header-item cui-tab-active">Angular</li>
                        <li data-cui-toggle="cuitab" data-cui-target="#reactTabContentExample" class="cui-tab-header-item">React</li>
                        <li data-cui-toggle="cuitab" data-cui-target="#cuiTabContentExample" class="cui-tab-header-item">CleverUi</li>
                    </ul>
                    <ul class="cui-tab-content">
                        <li id="vueTabContentExample" class="cui-tab-content-item">
                            <div class="cui-card-body cui-p-12">
                                <p>绝代有佳人，幽居在空谷。</p>
                                <p>自云良家女，零落依草木。</p>
                                <p>关中昔丧乱，兄弟遭杀戮。</p>
                                <p>官高何足论，不得收骨肉。</p>
                                <p>世情恶衰歇，万事随转烛。</p>
                                <p>夫婿轻薄儿，新人美如玉。</p>
                                <p>合昏尚知时，鸳鸯不独宿。</p>
                                <p>但见新人笑，那闻旧人哭。</p>
                                <p>在山泉水清，出山泉水浊。</p>
                                <p>侍婢卖珠回，牵萝补茅屋。</p>
                                <p>摘花不插发，采柏动盈掬。</p>
                            </div>
                        </li>
                        <li id="angularTabContentExample" class="cui-tab-content-item cui-tab-active cui-tab-in">
                            <div class="cui-card-body cui-p-12">
                                <p>绝代有佳人，幽居在空谷。</p>
                                <p>自云良家女，零落依草木。</p>
                                <p>关中昔丧乱，兄弟遭杀戮。</p>
                                <p>官高何足论，不得收骨肉。</p>
                                <p>世情恶衰歇，万事随转烛。</p>
                                <p>夫婿轻薄儿，新人美如玉。</p>
                                <p>合昏尚知时，鸳鸯不独宿。</p>
                                <p>但见新人笑，那闻旧人哭。</p>
                                <p>在山泉水清，出山泉水浊。</p>
                                <p>侍婢卖珠回，牵萝补茅屋。</p>
                                <p>摘花不插发，采柏动盈掬。</p>
                            </div>
                        </li>
                        <li id="reactTabContentExample" class="cui-tab-content-item">
                            <div class="cui-card-body cui-p-12">
                                <p>绝代有佳人，幽居在空谷。</p>
                                <p>自云良家女，零落依草木。</p>
                                <p>关中昔丧乱，兄弟遭杀戮。</p>
                                <p>官高何足论，不得收骨肉。</p>
                                <p>世情恶衰歇，万事随转烛。</p>
                                <p>夫婿轻薄儿，新人美如玉。</p>
                                <p>合昏尚知时，鸳鸯不独宿。</p>
                                <p>但见新人笑，那闻旧人哭。</p>
                                <p>在山泉水清，出山泉水浊。</p>
                                <p>侍婢卖珠回，牵萝补茅屋。</p>
                                <p>摘花不插发，采柏动盈掬。</p>
                            </div>
                        </li>
                        <li id="cuiTabContentExample" class="cui-tab-content-item">
                            <div class="cui-card-body cui-p-12">
                                <p>绝代有佳人，幽居在空谷。</p>
                                <p>自云良家女，零落依草木。</p>
                                <p>关中昔丧乱，兄弟遭杀戮。</p>
                                <p>官高何足论，不得收骨肉。</p>
                                <p>世情恶衰歇，万事随转烛。</p>
                                <p>夫婿轻薄儿，新人美如玉。</p>
                                <p>合昏尚知时，鸳鸯不独宿。</p>
                                <p>但见新人笑，那闻旧人哭。</p>
                                <p>在山泉水清，出山泉水浊。</p>
                                <p>侍婢卖珠回，牵萝补茅屋。</p>
                                <p>摘花不插发，采柏动盈掬。</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="cui-card-body cui-p-12">
                <div class="cui-card-header cui-f-15">
                    纵向标签
                </div>
                <div class="cui-tab cui-tab-vertical">
                    <ul class="cui-tab-header">
                        <li data-cui-toggle="cuitab" data-cui-target="#vueTabContentExample2" class="cui-tab-header-item">Vue</li>
                        <li data-cui-toggle="cuitab" data-cui-target="#angularTabContentExample2" class="cui-tab-header-item cui-tab-active">Angular</li>
                        <li data-cui-toggle="cuitab" data-cui-target="#reactTabContentExample2" class="cui-tab-header-item">React</li>
                        <li data-cui-toggle="cuitab" data-cui-target="#cuiTabContentExample2" class="cui-tab-header-item">CleverUi</li>
                    </ul>
                    <ul class="cui-tab-content">
                        <li id="vueTabContentExample2" class="cui-tab-content-item">
                            <div class="cui-card-body cui-p-12">
                                <p>绝代有佳人，幽居在空谷。</p>
                                <p>自云良家女，零落依草木。</p>
                                <p>关中昔丧乱，兄弟遭杀戮。</p>
                                <p>官高何足论，不得收骨肉。</p>
                                <p>世情恶衰歇，万事随转烛。</p>
                                <p>夫婿轻薄儿，新人美如玉。</p>
                                <p>合昏尚知时，鸳鸯不独宿。</p>
                                <p>但见新人笑，那闻旧人哭。</p>
                                <p>在山泉水清，出山泉水浊。</p>
                                <p>侍婢卖珠回，牵萝补茅屋。</p>
                                <p>摘花不插发，采柏动盈掬。</p>
                            </div>
                        </li>
                        <li id="angularTabContentExample2" class="cui-tab-content-item cui-tab-active cui-tab-in">
                            <div class="cui-card-body cui-p-12">
                                <p>绝代有佳人，幽居在空谷。</p>
                                <p>自云良家女，零落依草木。</p>
                                <p>关中昔丧乱，兄弟遭杀戮。</p>
                                <p>官高何足论，不得收骨肉。</p>
                                <p>世情恶衰歇，万事随转烛。</p>
                                <p>夫婿轻薄儿，新人美如玉。</p>
                                <p>合昏尚知时，鸳鸯不独宿。</p>
                                <p>但见新人笑，那闻旧人哭。</p>
                                <p>在山泉水清，出山泉水浊。</p>
                                <p>侍婢卖珠回，牵萝补茅屋。</p>
                                <p>摘花不插发，采柏动盈掬。</p>
                            </div>
                        </li>
                        <li id="reactTabContentExample2" class="cui-tab-content-item">
                            <div class="cui-card-body cui-p-12">
                                <p>绝代有佳人，幽居在空谷。</p>
                                <p>自云良家女，零落依草木。</p>
                                <p>关中昔丧乱，兄弟遭杀戮。</p>
                                <p>官高何足论，不得收骨肉。</p>
                                <p>世情恶衰歇，万事随转烛。</p>
                                <p>夫婿轻薄儿，新人美如玉。</p>
                                <p>合昏尚知时，鸳鸯不独宿。</p>
                                <p>但见新人笑，那闻旧人哭。</p>
                                <p>在山泉水清，出山泉水浊。</p>
                                <p>侍婢卖珠回，牵萝补茅屋。</p>
                                <p>摘花不插发，采柏动盈掬。</p>
                            </div>
                        </li>
                        <li id="cuiTabContentExample2" class="cui-tab-content-item">
                            <div class="cui-card-body cui-p-12">
                                <p>绝代有佳人，幽居在空谷。</p>
                                <p>自云良家女，零落依草木。</p>
                                <p>关中昔丧乱，兄弟遭杀戮。</p>
                                <p>官高何足论，不得收骨肉。</p>
                                <p>世情恶衰歇，万事随转烛。</p>
                                <p>夫婿轻薄儿，新人美如玉。</p>
                                <p>合昏尚知时，鸳鸯不独宿。</p>
                                <p>但见新人笑，那闻旧人哭。</p>
                                <p>在山泉水清，出山泉水浊。</p>
                                <p>侍婢卖珠回，牵萝补茅屋。</p>
                                <p>摘花不插发，采柏动盈掬。</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--时间轴-->
        <div id="cuitimeline" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                时间轴
            </div>
            <div class="cui-card-body cui-p-12">
                <ul class="cui-timeline cui-time-direction-cross cui-w-full">
                    <li class="cui-timeline-item">
                        <p class="cui-text-primary cui-f-13">时间轴X</p>
                        <p class="cui-mt-6">时间: 2020/01/13</p>
                        <p class="cui-mt-6 cui-f-13">第一天, Clever-UI开发进行中...</p>
                    </li>
                    <li class="cui-timeline-item">
                        <p class="cui-text-primary cui-f-13">时间轴X</p>
                        <p class="cui-mt-6">时间: 2020/01/15</p>
                        <p class="cui-mt-6 cui-f-13">第二天, Clever-UI开发进行中...</p>
                    </li>
                    <li class="cui-timeline-item">
                        <p class="cui-text-primary cui-f-13">时间轴X</p>
                        <p class="cui-mt-6">时间: 2020/01/17</p>
                        <p class="cui-mt-6 cui-f-13">第三天, Clever-UI开发进行中...</p>
                    </li>
                    <li class="cui-timeline-item">
                        <p class="cui-text-primary cui-f-13">时间轴X</p>
                        <p class="cui-mt-6">时间: 2020/01/20</p>
                        <p class="cui-mt-6 cui-f-13">第四天, Clever-UI开发完成.</p>
                    </li>
                </ul>
            </div>
            <div class="cui-card-body cui-p-12">
                <ul class="cui-timeline cui-time-direction-vertical">
                    <li class="cui-timeline-item cui-pl-9">
                        <p class="cui-text-primary cui-f-13">时间轴Y</p>
                        <p class="cui-mt-6">时间: 2020/01/13</p>
                        <p class="cui-mt-6 cui-f-13">第一天, Clever-UI开发进行中...</p>
                    </li>
                    <li class="cui-timeline-item cui-pl-9">
                        <p class="cui-text-primary cui-f-13">时间轴Y</p>
                        <p class="cui-mt-6">时间: 2020/01/15</p>
                        <p class="cui-mt-6 cui-f-13">第二天, Clever-UI开发进行中...</p>
                    </li>
                    <li class="cui-timeline-item cui-pl-9">
                        <p class="cui-text-primary cui-f-13">时间轴Y</p>
                        <p class="cui-mt-6">时间: 2020/01/17</p>
                        <p class="cui-mt-6 cui-f-13">第三天, Clever-UI开发进行中...</p>
                    </li>
                    <li class="cui-timeline-item cui-pl-9">
                        <p class="cui-text-primary cui-f-13">时间轴Y</p>
                        <p class="cui-mt-6">时间: 2020/01/20</p>
                        <p class="cui-mt-6 cui-f-13">第四天, Clever-UI开发完成.</p>
                    </li>
                </ul>
            </div>
        </div>
        <!--侧边框-->
        <div id="cuiaside" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                侧边框
            </div>
            <div class="cui-card-body cui-p-12">
                <button type="button" class="cui-btn cui-btn-white" data-cui-toggle="cuiaside" data-cui-target="#cuiAsideExample">点击出现侧边栏</button>
                <div class="cui-aside" id="cuiAsideExample">
                    <div class="cui-aside-dialog">
                        <div class="cui-aside-content">
                            <h4 class="cui-text-c6 cui-text-center cui-mt-12">佳人</h4>
                            <div class="cui-card-body cui-p-12 cui-text-center">
                                <p>绝代有佳人，幽居在空谷。</p>
                                <p>自云良家女，零落依草木。</p>
                                <p>关中昔丧乱，兄弟遭杀戮。</p>
                                <p>官高何足论，不得收骨肉。</p>
                                <p>世情恶衰歇，万事随转烛。</p>
                                <p>夫婿轻薄儿，新人美如玉。</p>
                                <p>合昏尚知时，鸳鸯不独宿。</p>
                                <p>但见新人笑，那闻旧人哭。</p>
                                <p>在山泉水清，出山泉水浊。</p>
                                <p>侍婢卖珠回，牵萝补茅屋。</p>
                                <p>摘花不插发，采柏动盈掬。</p>
                            </div>
                            <div class="cui-card-body cui-p-12 cui-text-center">
                                <p>绝代有佳人，幽居在空谷。</p>
                                <p>自云良家女，零落依草木。</p>
                                <p>关中昔丧乱，兄弟遭杀戮。</p>
                                <p>官高何足论，不得收骨肉。</p>
                                <p>世情恶衰歇，万事随转烛。</p>
                                <p>夫婿轻薄儿，新人美如玉。</p>
                                <p>合昏尚知时，鸳鸯不独宿。</p>
                                <p>但见新人笑，那闻旧人哭。</p>
                                <p>在山泉水清，出山泉水浊。</p>
                                <p>侍婢卖珠回，牵萝补茅屋。</p>
                                <p>摘花不插发，采柏动盈掬。</p>
                            </div>
                            <div class="cui-card-body cui-p-12 cui-text-center">
                                <p>绝代有佳人，幽居在空谷。</p>
                                <p>自云良家女，零落依草木。</p>
                                <p>关中昔丧乱，兄弟遭杀戮。</p>
                                <p>官高何足论，不得收骨肉。</p>
                                <p>世情恶衰歇，万事随转烛。</p>
                                <p>夫婿轻薄儿，新人美如玉。</p>
                                <p>合昏尚知时，鸳鸯不独宿。</p>
                                <p>但见新人笑，那闻旧人哭。</p>
                                <p>在山泉水清，出山泉水浊。</p>
                                <p>侍婢卖珠回，牵萝补茅屋。</p>
                                <p>摘花不插发，采柏动盈掬。</p>
                            </div>
                            <div class="cui-card-body cui-p-12 cui-text-center">
                                <p>绝代有佳人，幽居在空谷。</p>
                                <p>自云良家女，零落依草木。</p>
                                <p>关中昔丧乱，兄弟遭杀戮。</p>
                                <p>官高何足论，不得收骨肉。</p>
                                <p>世情恶衰歇，万事随转烛。</p>
                                <p>夫婿轻薄儿，新人美如玉。</p>
                                <p>合昏尚知时，鸳鸯不独宿。</p>
                                <p>但见新人笑，那闻旧人哭。</p>
                                <p>在山泉水清，出山泉水浊。</p>
                                <p>侍婢卖珠回，牵萝补茅屋。</p>
                                <p>摘花不插发，采柏动盈掬。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--悬浮框-->
        <div id="cuifloatbtn" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                悬浮框
            </div>
            <div class="cui-card-body cui-p-12">
                <button type="button" class="cui-btn cui-btn-md cui-btn-primary" onclick="$('#floatListExample').removeClass('cui-hidden')">
                    显示悬浮框
                </button>
                <button type="button" class="cui-btn cui-btn-md cui-btn-danger" onclick="$('#floatListExample').addClass('cui-hidden')">
                    隐藏悬浮框
                </button>
                <ul id="floatListExample" class="cui-float-list">
                    <li class="cui-float-item">
                        <div class="cui-float-header">
                            <i class="cui-float-icon cui-icon icon-caidan"></i>
                            <p class="cui-float-text">
                                <span>快捷</span><span>菜单</span>
                            </p>
                        </div>
                        <div class="cui-float-body">
                            <div class="cui-float--scrollwrap">
                                <div class="cui-float-body--scroll">
                                    <div class="cui-float-body--inner">
                                        <div class="cui-list-group cui-border-none">
                                            <a class="cui-list-group-item" href="#cuicardanchor">卡片</a>
                                            <a class="cui-list-group-item" href="#cuibtnanchor">按钮和按钮组</a>
                                            <a class="cui-list-group-item" href="#cuiformanchor">表单</a>
                                            <a class="cui-list-group-item" href="#cuiforminlineanchor">行内表单</a>
                                            <a class="cui-list-group-item" href="#cuilayoutanchor">布局</a>
                                            <a class="cui-list-group-item" href="#cuitableanchor">表格</a>
                                            <a class="cui-list-group-item" href="#cuisignbadgeanchor">标签和徽章</a>
                                            <a class="cui-list-group-item" href="#cuilistgroupanchor">列表和列表组</a>
                                            <a class="cui-list-group-item" href="#cuipageanchor">分页</a>
                                            <a class="cui-list-group-item" href="#cuimodalanchor">模态框</a>
                                            <a class="cui-list-group-item" href="#cuitoastranchor">Toastr</a>
                                            <a class="cui-list-group-item" href="#cuiiconanchor">图标</a>
                                            <a class="cui-list-group-item" href="#cuiconfirmanchor">确认框</a>
                                            <a class="cui-list-group-item" href="#cuiloadinganchor">加载动画</a>
                                            <a class="cui-list-group-item" href="#cuidismissanchor">遮罩层</a>
                                            <a class="cui-list-group-item" href="#cuibtnloadinganchor">加载按钮</a>
                                            <a class="cui-list-group-item" href="#cuiswitchanchor">开关</a>
                                            <a class="cui-list-group-item" href="#cuitabanchor">标签页</a>
                                            <a class="cui-list-group-item" href="#cuitimeline">时间轴</a>
                                            <a class="cui-list-group-item" href="#cuifloatbtn">悬浮框</a>
                                            <a class="cui-list-group-item" href="#cuiaside">侧边框</a>
                                            <a class="cui-list-group-item" href="#cuitopnav">顶部导航</a>
                                            <a class="cui-list-group-item" href="#cuileftmenu">左侧菜单</a>
                                            <a class="cui-list-group-item" href="#cuidropdown">下拉菜单</a>
                                            <a class="cui-list-group-item" href="#cuiselect">Select选择框</a>

                                            <a class="cui-list-group-item" href="#cuiexampletop">回到顶部</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="cui-float-item">
                        <div class="cui-float-header">
                            <i class="cui-float-icon cui-icon icon-icon_kefu"></i>
                            <p class="cui-float-text">
                                <span>在线</span><span>客服</span>
                            </p>
                        </div>
                        <div class="cui-float-body">
                            <div class="cui-float--scrollwrap">
                                <div class="cui-float-body--scroll">
                                    <div class="cui-float-body--inner">
                                        <img class="cui-w-full cui-h-full" src="./qr.png" alt>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="cui-float-item">
                        <div class="cui-float-header" onclick="window.location.reload()">
                            <i class="cui-float-icon cui-icon icon-shuaxin"></i>
                            <p class="cui-float-text">
                                <span>重新</span><span>加载</span>
                            </p>
                        </div>
                    </li>
                    <li class="cui-float-item">
                        <div class="cui-float-header">
                            <i class="cui-float-icon cui-icon icon-sousuo"></i>
                            <p class="cui-float-text">
                                <span>页面</span><span>搜索</span>
                            </p>
                        </div>
                        <div class="cui-float-body" style="width: 300px; left: -310px">
                            <div class="cui-float--scrollwrap">
                                <div class="cui-float-body--scroll">
                                    <div class="cui-float-body--inner">
                                        <form class="cui-form-inline">
                                            <div class="cui-form-group">
                                                <label for="searchExample" class="cui-hidden"></label>
                                                <input id="searchExample" type="text" class="cui-form-control cui-input-lg">
                                                <button type="button" class="cui-btn cui-btn-lg cui-btn-primary">查询</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--顶部导航-->
        <div id="cuitopnav" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                顶部导航
            </div>
            <div class="cui-card-body cui-p-12">
                <div class="cui-nav">
                    <div class="cui-nav-logo">
                        <p>Clever-UI CMS</p>
                    </div>
                    <div class="cui-nav-body">
                        <div class="cui-col-3"></div>
                        <div class="cui-col-3"></div>
                        <div class="cui-col-3"></div>
                        <div class="cui-col-2 cui-flex">
                            <input id="navBodyExample" type="text" class="cui-form-control cui-input-sm" placeholder="请输入关键词">
                            <button type="button" class="cui-btn cui-btn-md cui-btn-primary">搜索</button>
                        </div>
                        <div class="cui-col-1"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--左侧菜单-->
        <div id="cuileftmenu" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                左侧菜单
            </div>
            <div class="cui-card-body">
                <!--<div class="cui-left-menu cui-leftsidein">-->
                <div class="cui-left-menu">
                    <div id="cuiMenuScroll" class="cui-menu-scroll">
                        <div class="cui-menu-body">
                            <ul class="cui-menu-header">
                                <li class="cui-menu-header-item cui-menu-active" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=8">
                                    <i class="cui-menu-icon cui-icon icon-caidan"></i>
                                    <span class="cui-menu-title">首页</span>
                                </li>
                                <li class="cui-menu-header-item" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=9">
                                    <i class="cui-menu-icon cui-icon icon-caozuo"></i>
                                    <span class="cui-menu-title">快捷操作</span>
                                </li>
                                <li class="cui-menu-header-item" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=10">
                                    <i class="cui-menu-icon cui-icon icon-payment"></i>
                                    <span class="cui-menu-title">充值提现</span>
                                </li>
                            </ul>
                            <ul class="cui-menu-item">
                                <li class="cui-menu-item-title">会员</li>
                                <li class="cui-menu-item-body-wrap">
                                    <ul class="cui-menu-item-body">
                                        <li class="cui-menu-item-body-item" title="管理列表" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=1">管理列表</li>
                                        <li class="cui-menu-item-body-item" title="银行卡" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=2">银行卡</li>
                                        <li class="cui-menu-item-body-item" title="注册审核" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=3">注册审核</li>
                                        <li class="cui-menu-item-body-item" title="积分" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=4">积分</li>
                                        <li class="cui-menu-item-body-item" title="充值记录" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=5">充值记录</li>
                                        <li class="cui-menu-item-body-item" title="提现记录" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=6">提现记录</li>
                                        <li class="cui-menu-item-body-item" title="资金流水" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=7">资金流水</li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="cui-menu-item">
                                <li class="cui-menu-item-title">代理商</li>
                                <li class="cui-menu-item-body-wrap">
                                    <ul class="cui-menu-item-body">
                                        <li class="cui-menu-item-body-item" title="列表管理" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=11">列表管理</li>
                                        <li class="cui-menu-item-body-item" title="银行卡" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=12">银行卡</li>
                                        <li class="cui-menu-item-body-item" title="积分管理" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=13">积分管理</li>
                                        <li class="cui-menu-item-body-item" title="提现记录" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=14">提现记录</li>
                                        <li class="cui-menu-item-body-item" title="资金流水" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=15">资金流水</li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="cui-menu-item">
                                <li class="cui-menu-item-title">订单</li>
                                <li class="cui-menu-item-body-wrap">
                                    <ul class="cui-menu-item-body">
                                        <li class="cui-menu-item-body-item" title="待完成订单列表" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=16">待完成订单</li>
                                        <li class="cui-menu-item-body-item" title="已完成" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=17">已完成订单</li>
                                        <li class="cui-menu-item-body-item" title="异常订单" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=18">异常订单</li>
                                        <li class="cui-menu-item-body-item" title="冻结订单" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=19">冻结订单</li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="cui-menu-item">
                                <li class="cui-menu-item-title">后台</li>
                                <li class="cui-menu-item-body-wrap">
                                    <ul class="cui-menu-item-body">
                                        <li class="cui-menu-item-body-item" title="管理员列表" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=20">管理员列表</li>
                                        <li class="cui-menu-item-body-item" title="权限节点" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=21">权限节点</li>
                                        <li class="cui-menu-item-body-item" title="后台角色" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=22">后台角色</li>
                                        <li class="cui-menu-item-body-item" title="行为记录" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=23">行为记录</li>
                                        <li class="cui-menu-item-body-item" title="系统日志" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=24">系统日志</li>
                                        <li class="cui-menu-item-body-item" title="短信日志" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=25">短信日志</li>
                                        <li class="cui-menu-item-body-item" title="登录日志" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=26">登录日志</li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="cui-menu-item">
                                <li class="cui-menu-item-title">门户</li>
                                <li class="cui-menu-item-body-wrap">
                                    <ul class="cui-menu-item-body">
                                        <li class="cui-menu-item-body-item" title="新闻" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=27">新闻</li>
                                        <li class="cui-menu-item-body-item" title="公告" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=28">公告</li>
                                        <li class="cui-menu-item-body-item" title="站内信" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=29">站内信</li>
                                        <li class="cui-menu-item-body-item" title="建议反馈" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=30">建议反馈</li>
                                        <li class="cui-menu-item-body-item" title="协议条款" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=31">协议条款</li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="cui-menu-item">
                                <li class="cui-menu-item-title">设置</li>
                                <li class="cui-menu-item-body-wrap">
                                    <ul class="cui-menu-item-body">
                                        <li class="cui-menu-item-body-item" title="系统安全" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=32">系统安全</li>
                                        <li class="cui-menu-item-body-item" title="短信通道" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=33">短信通道</li>
                                        <li class="cui-menu-item-body-item" title="邮箱设置" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=34">邮箱设置</li>
                                        <li class="cui-menu-item-body-item" title="支付设置" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=35">支付设置</li>
                                        <li class="cui-menu-item-body-item" title="提现设置" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=36">提现设置</li>
                                        <li class="cui-menu-item-body-item" title="应用设置" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=37">应用设置</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div id="cuiMenuScrollThumb" class="cui-scroll-thumb">
                        <div id="cuiMenuScrollBar" class="cui-scroll-bar"></div>
                    </div>
                    <div class="cui-menu-footer">
                        ------ 我是菜单的底部! 空空如也~~~ ------
                    </div>
                </div>
            </div>
            <div class="cui-card-body cui-p-12">
                <div class="cui-menu-example">
                    <div id="cuiMenuScrollExample" class="cui-menu-scroll-example">
                        <div style="width:240px;height:2000px; position:relative;">
                            <p style="position: absolute;top: 0; font-size: 16px">开始</p>
                            <p style="position: absolute;top: 500px; font-size: 16px">500px</p>
                            <p style="position: absolute;top: 1000px; font-size: 16px">1000px</p>
                            <p style="position: absolute;top: 1500px; font-size: 16px">1500px</p>
                            <p style="position: absolute;bottom: 0; font-size: 16px">结束</p>
                        </div>
                    </div>
                    <div id="cuiMenuScrollThumbExample" class="cui-scroll-thumb-example">
                        <div id="cuiMenuScrollBarExample" class="cui-scroll-bar-example"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--下拉菜单-->
        <div id="cuidropdown" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                下拉菜单
            </div>
            <div class="cui-card-body cui-p-12">
                <div class="cui-dropdown">
                    <button type="button" data-cui-toggle="cuidropdown" class="cui-dropdown-btn cui-btn cui-btn-white">下拉菜单1</button>
                    <ul class="cui-dropdown-content">
                        <li class="cui-dropdown-item">Vue交互框架1</li>
                        <li class="cui-dropdown-item">Angular交互框架1</li>
                        <li class="cui-dropdown-item">React交互框架1</li>
                        <li class="cui-dropdown-item">Layui UI框架1</li>
                        <li class="cui-dropdown-item">Mui 5+runtime UI框架1</li>
                        <li class="cui-dropdown-item">Clever-UI UI框架1</li>
                    </ul>
                </div>
                <div class="cui-dropdown">
                    <button type="button" data-cui-toggle="cuidropdown" class="cui-dropdown-btn cui-btn cui-btn-white">下拉菜单2</button>
                    <ul class="cui-dropdown-content">
                        <li class="cui-dropdown-item" data-cui-target="_self" data-cui-href="/php-test/clever-ui/test/index.html?_=001">Vue交互框架2</li>
                        <li class="cui-dropdown-item" data-cui-toggle="cuimodal" data-cui-target="#testModal">Angular交互框架2</li>
                        <li class="cui-dropdown-item">React交互框架2</li>
                        <li class="cui-dropdown-item">Layui UI框架2</li>
                        <li class="cui-dropdown-item">Mui 5+runtime UI框架2</li>
                        <li class="cui-dropdown-item">Clever-UI UI框架2</li>
                    </ul>
                </div>
            </div>
        </div>
        <!--select选择框-->
        <div id="cuiselect" class="cui-card cui-bg-white cui-col-12">
            <div class="cui-card-header cui-f-16">
                select选择框
            </div>
            <div class="cui-card-body cui-p-12">
                <div class="cui-select" style="width: 160px;height:28px;">
                    <div class="cui-select-header">
                        <input class="cui-select-header--item" value="请选择发货地址" readonly>
                        <i class="cui-select-header--item--icon cui-select-icon-down"></i>
                    </div>
                    <div class="cui-select-content">
                        <ul class="cui-select--content">
                            <li class="cui-select-item" data-value="床前明月光">床前明月光</li>
                            <li class="cui-select-item" data-value="疑是地上霜">疑是地上霜</li>
                            <li class="cui-select-item" data-value="举头望明月">举头望明月</li>
                            <li class="cui-select-item" data-value="低头思故乡">低头思故乡</li>
                        </ul>
                    </div>
                </div>
                <div class="cui-select" style="width: 160px;height:28px;">
                    <div class="cui-select-header">
                        <input class="cui-select-header--item" value="疑是地上霜" readonly>
                        <i class="cui-select-header--item--icon cui-select-icon-down"></i>
                    </div>
                    <div class="cui-select-content">
                        <ul class="cui-select--content">
                            <li class="cui-select-item" data-cui-value="床前明月光">床前明月光</li>
                            <li class="cui-select-item cui-select--active" data-cui-value="疑是地上霜">疑是地上霜</li>
                            <li class="cui-select-item" data-cui-value="举头望明月">举头望明月</li>
                            <li class="cui-select-item cui-select--disabled" data-cui-value="低头思故乡">低头思故乡</li>
                        </ul>
                    </div>
                </div>
                <select id="cui-select-example" class="cui-form-control cui-input-sm cui-w-160">
                    <option value="">请选择Js框架</option>
                    <option value="1" disabled>Vue框架</option>
                    <option value="2" selected>React框架</option>
                    <option value="3">Angular框架</option>
                </select>
            </div>
        </div>
    </div>
</div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="../dist/index.js" type="text/javascript"></script>

<script>
    !function (window, $){
        'use strict';

        // 模态框
        var testModalBtn = $('#testModalBtn')
            , testModal = $("#testModal");
        testModalBtn.on('click', function () {
            testModal.cuiModal();
        });

        testModal.on('cui.modal.shown', function (e) {
            $cui.toastr.tip('testModal shown');
        });

        testModal.on('cui.modal.hidden', function (e) {
            $cui.toastr.tip('testModal hidden');
        });

        // 加载遮罩框
        $('#showShade').on('click', function () {
            var loading1 = $cui.loadingShow('water', '登录中...');
            var t1 = setTimeout(function () {
                clearTimeout(t1);
                loading1.cuiLoadingHide();
                var loading2 = $cui.loadingShow('downup', '正在处理，请稍后...');
                var t2 = setTimeout(function () {
                    clearTimeout(t2);
                    loading2.cuiLoadingHide();
                    var loading3 = $cui.loadingShow('3d', '模块加载中...', true);
                    var t3 = setTimeout(function () {
                        clearTimeout(t3);
                        loading3.cuiLoadingHide();
                        var loading4 = $cui.loadingShow('inout', '数据加载完成...', true);
                        var t4 = setTimeout(function () {
                            clearTimeout(t4);
                            loading4.cuiLoadingHide();
                        }, 1000);
                    }, 1000);
                }, 1000);
            }, 1000);
        });

        /* btn(a) loading */
        var btnCountTimer = 0,
            isRepeat = false;
        $('#btnLoadingExample').on('click', function (e) {
            var that = $(this);
            if (isRepeat) {
                $cui.toastr.warning('禁止重复点击');
                return;
            }

            btnCountTimer++;
            isRepeat = that.cuiBtnLoading();
            setTimeout(function () {
                isRepeat = that.cuiBtnLoadingReset();
                $cui.toastr.tip('点击了' + btnCountTimer + '次');
            }, 1500);
        });
        /* btn(button) loading */
        var btnCountTimer1 = 0;
        $('#btnLoadingExample1').on('click', function (e) {
            var that = $(this);
            btnCountTimer1++;
            that.cuiBtnLoading();
            setTimeout(function () {
                that.cuiBtnLoadingReset();
                $cui.toastr.tip('点击了' + btnCountTimer1 + '次');
            }, 1500);
        });

        /* checkbox */
        $("#cuiCheckboxExample").on('click', function (e) {
            $cui.toastr.tip(!!this.checked ? '已开启' : '已关闭');
        });

        /* Tab */
        $('#vueTabExample').on('cui.tab.show', function (e) {
            $cui.toastr.tip('Vue show');
        }).on('cui.tab.shown', function (e) {
            $cui.toastr.tip('Vue shown');
        }).on('cui.tab.hide', function (e) {
            $cui.toastr.tip('Vue hide');
        }).on('cui.tab.hidden', function (e) {
            $cui.toastr.tip('Vue hidden');
        });
        // 初始化左侧菜单滚动条UI
        $cui.scrollY('cuiMenuScroll', 'cuiMenuScrollThumb', 'cuiMenuScrollBar');
        // 菜单样例
        $cui.scrollY('cuiMenuScrollExample', 'cuiMenuScrollThumbExample', 'cuiMenuScrollBarExample');
        // select插件
        $('#cui-select-example').cuiSelect().on('change', function (e) {
            console.log(this.value)
        });
    } (window, window.jQuery);
</script>
</body>
</html>
